<template>
  <view class="sortfilter">
    <uni-data-select
      class="filteritem"
      v-model="value1"
      :localdata="range1"
      @change="change1"
      :clear="false"
    ></uni-data-select>
    <uni-data-select
      class="filteritem"
      v-model="value2"
      :localdata="range2"
      @change="change2"
      :clear="false"
    ></uni-data-select>
    <uni-data-select
      class="filteritem"
      v-model="value3"
      :localdata="range3"
      @change="change3"
      :clear="false"
    ></uni-data-select>
  </view>
</template>
 
<script>
export default {
  name: "sort",
  props: {},
  data() {
    return {
      value1: 0,
      value2: 0,
      value3: 0,
      range1: [
        { value: 0, text: "商品分类" },
        { value: 1, text: "商品分类2" },
        { value: 2, text: "商品分类3" },
      ],
      range2: [
        { value: 0, text: "商品排序" },
        { value: 1, text: "商品排序2" },
        { value: 2, text: "商品排序3" },
      ],
      range3: [
        { value: 0, text: "闲置/求购" },
        { value: 1, text: "闲置/求购2" },
        { value: 2, text: "闲置/求购3" },
      ],
    };
  },
  mounted() {},
  methods: {
    change1(e) {
      console.log("e:", e);
    },
    change2(e) {
      console.log("e:", e);
    },
    change3(e) {
      console.log("e:", e);
    },
  },
};
</script>
<style lang="scss">
.sortfilter {
  margin: 10rpx 0;
  width: 96%;
  padding: 15rpx 2%;
  background-color: #ffffff;
  display: flex;
  justify-content: space-between;
  .filteritem {
    width: 27%;
    #deep .uni-select {
      border: 0px !important;
    }
  }
}
</style>
